<!--
  * 线路列表
  *
-->
<template>
  <a-card class="role-container">
    <template #title>
      <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
        <span style="font-size: 14px">线路列表</span>
        <a-button type="primary" size="small" @click="add()">
          <span style="font-size: 12px">新增</span>
        </a-button>
      </div>
    </template>
    <a-menu mode="vertical" @click="menuClick" v-model:selectedKeys="selectedKeys">
      <a-menu-item v-for="item in tableData" :key="item.id">
        <a-popover placement="right">
          <template #content>
            <div style="display: flex; flex-direction: column">
              <a-button type="link" @click="add(item)" v-privilege="'system:role:update'">编辑</a-button>
              <a-button danger type="link" @click="deleteData(item.id, item.name)" v-privilege="'system:role:delete'">删除</a-button>
            </div>
          </template>
          <div style="width: 100%; height: 100%">{{ item.name }}</div>
        </a-popover>
      </a-menu-item>
    </a-menu>
  </a-card>
  <!-- 新增/编辑 -->
  <LineFormModal ref="formModal" @reloadList="queryData" />
</template>
<script setup lang="ts">
import _ from 'lodash'
import { lineApi } from '@/api/business/data/line-api'
import { QUERY_FORM_OP } from '@/constants/support/query-form-op-const'
import { useQuery } from '@/hooks/web/use-query-hook'
import eventEmitter from '@/lib/event-emitter'
import LineFormModal from '../line-form-modal.vue'

const emit = defineEmits(['select-category'])
// ----------------------- 部门树的展示 ---------------------

// 搜索
const { tableData, queryData, deleteData } = useQuery({
  fetchDataApi: async (params) => {
    const data = {
      ...params
    }
    const res = await lineApi.queryLineList(data)
    return {
      list: res.data.data,
      total: res.data.total
    }
  },
  fetchDeleteApi: async (id) => {
    const res = await lineApi.delLine({ id })
    return !!res
  },
  limit: null,
  queryFormFilter: {
    name: ''
  },
  queryFormOp: {
    name: QUERY_FORM_OP['模糊查询']
  }
})
onMounted(() => {
  queryData()
})

eventEmitter.on('Custom:refreshData', () => {
  if (tableData.value && tableData.value.length > 0) {
    selectedKeys.value = [tableData.value[0].id] // 选中第一个数据
    emit('select-category', tableData.value[0].id) // 调用接口
  } else {
    selectedKeys.value = [] // 如果没有数据，清空选中状态
  }
})
// --------------------------- 点击 ---------------------------
const selectedKeys = ref()

const menuClick = (val) => {
  emit('select-category', val.key)
}

// ---------------------------- 添加/修改 ----------------------------
const formModal = ref()

function add(item) {
  formModal.value.showDrawer(item)
}

// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({
  queryData
})

// 新增逻辑：在查询数据后判断 tableData 是否有值
watch(
  tableData,
  (newData) => {
    if (newData && newData.length > 0) {
      selectedKeys.value = [newData[0].id] // 选中第一个数据
      emit('select-category', newData[0].id) // 调用接口
    }
  },
  { immediate: true }
)
</script>
<style scoped lang="less">
.role-container {
  height: 100%;
  overflow-y: auto;
  :deep(.ant-card-body) {
    padding: 5px;
  }
}
:deep(.ant-menu-light.ant-menu-root.ant-menu-vertical) {
  border-inline-end: none;
}
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: none;
}
</style>
